
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css">
    <link rel="stylesheet" href="./login.css">
    <link rel="stylesheet" type="text/css" href="static/css/body.css"/>
    <style type="text/css">
        #login_box{
            width: 100%;
            height: 100%;
            background:#00000040;
            margin:auto;
            margin-top: 10%;
/*            text-align: center;*/
            border-radius: 10px;
            padding: 50px 50px;
        }
        #login_box h2{
            color: #e8e7b730;
            margin-top: 30%;
        }
        #login_box #form #input_box{
            margin-top: 5%;
        }
        #login_box #form #input_box i{
            color: #e8e7b730;
        }
        #login_box #form #input_box input{
            border:0;
            width: 60%;
            font-size: 15px;
            color: #fff;
            background: #ffffff00;
            border-bottom: 2px solid#eacda950;
            padding: 5px 10px;
            margin-top: 10px;
        }
        #login_box button{
            margin-top: 50px;
            width: 40%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            font-size: 15px;
            background-image: linear-gradient(to top, #30324d 0%, #5f6298 100%);
        }
        #login_box #Sign{
            margin-top: 45%;
            margin-left: 60%;
        }
        #login_box #Sign a{
            color: #d1c2d8;
        }
    </style>
</head>
 
<body>
    <div id="login_box">
        <form action="/tp1">
            <p>性别与幸福感的关系</p>
            <div>
                {{ bg1|safe }} 
            </div>
            <button>图表</button>
        </form>
        <form action="/tp2">
            <p>年龄与幸福感的关系</p>
            <div>
                {{ bg2|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp3">
            <p>居住地与幸福感的关系</p>
            <div>
                {{ bg3|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp4">
            <p>婚姻状况与幸福感的关系</p>
            <div>
                {{ bg4|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp5">
            <p>居住方式与幸福感的关系</p>
            <div>
                {{ bg5|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp6">
            <p>文化程度与幸福感的关系</p>
            <div>
                {{ bg6|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp7">
            <p>收入与幸福感的关系</p>
            <div>
                {{ bg7|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp8">
            <p>子女关系与幸福感的关系</p>
            <div>
                {{ bg8|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp9">
            <p>身体状况与幸福感的关系</p>
            <div>
                {{ bg9|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp10">
            <p>娱乐与幸福感的关系</p>
            <div>
                {{ bg10|safe }}
            </div>
            <button>图表</button>
        </form>
        <form action="/tp11">
            <p>兴趣状况与幸福感的关系</p>
            <div>
                {{ bg11|safe }}
            </div>
            <button>图表</button>
        </form>
    </div>
</body>
<script></script>
</html>